<template>
  <div class="">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="创建招聘"
      fixed
    ></van-nav-bar>
    <main>
      <input
        type="text"
        placeholder="请输入招聘标题20字以内"
        v-model="title"
        maxlength="30"
      />
      <!-- <textarea placeholder="请输入视频标题20字以内"></textarea> -->
      <van-field
        v-model="describes"
        class="textarea"
        rows="3"
        autosize
        type="textarea"
        maxlength="300"
        placeholder="请输入招聘描述300字以内"
      />
      <div id="editors"></div>
      <h3>上传封面图</h3>
      <div class="box">
        <!-- 封面 -->
        <div class="upload" style="margin-left: 20px">
          <img
            class="clickUp"
            src="../../assets/images/marketing/addInvite.png"
            @click="clickUp()"
            v-if="cover == ''"
          />
          <img
            v-else
            @click="clickUp()"
            class="clickUp"
            :src="$publicObj.urlImg(cover)"
            alt=""
          />
        </div>
      </div>
      <input
        type="file"
        ref="coverfile"
        style="display: none"
        @change="onUpload()"
      />
      <h3>招聘发布设置</h3>
      <van-cell-group>
        <van-cell title="是否推广" center>
          <template #default>
            <van-switch
              v-model="isSpread"
              size="20px"
              :active-value="2"
              :inactive-value="1"
            />
          </template>
        </van-cell>
        <van-cell title="推广单价" center v-show="isSpread == 2">
          <template #default>
            <van-field
              v-model="spreadPrice"
              placeholder="请输入"
              type="number"
              input-align="right"
            />元
          </template>
        </van-cell>
        <van-cell title="推广次数" center v-show="isSpread == 2">
          <template #default>
            <van-field
              v-model="spreadNum"
              type="number"
              placeholder="请输入"
              input-align="right"
            />元
          </template>
        </van-cell>
       
        <van-cell title="是否添加公众号" center>
          <template #default>
            <van-switch v-model="attention" size="20px" />
          </template>
        </van-cell>

      </van-cell-group>
    </main>
    <footer>
      <div class="price">
        本次推广需支付
        <p>
          ￥<span>{{ spreadTotalPrice }}</span>
        </p>
      </div>
      <div class="push" @click="clickPush">发布招聘</div>
    </footer>
    <!-- 弹框 -->
    <van-dialog v-model="show" :show-confirm-button="false">
      <template #title>
        <van-icon name="cross" @click="show = false" />
      </template>
      <template #default>
        <div class="cont">
          <p>当前账号余额不足无法发布！</p>
          <van-divider />
          <div class="foot" @click="show = false">去充值</div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import wangeditor from "wangeditor";
export default {
  name: "",
  data() {
    return {
      title: "", //标题
      describes: "", //描述
      cover: "", //封面图片地址
      videoUrl: "", //视频图片
      editor: "",
      editorContent: "", //文本内容
      form: false, //是否添加表单
      attention: false, //是否关注公众号
      changeTitle: false, //是否可更改标题
      card: false, //是否允许添加名片
      isSpread: 1, //是否推广
      spreadPrice: "", //单价
      spreadNum: "", //推广数
      show: false, //弹框
    };
  },
  computed: {
    spreadTotalPrice() {
      return (this.spreadPrice * this.spreadNum).toFixed(2);
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    document.querySelector("#app").style.backgroundColor = "#fff";
     this.seteditor();
  },
  methods: {
    //文本编辑器
    seteditor() {
      this.editor = new wangeditor("#editors");
      //editor改变时，将里面的内容放进editorContent
      this.editor.config.onchange = (html) => {
        // console.log(html);
        this.editorContent = html;
      };
      this.editor.config.menus = [
        "head", //
        "bold", //
        "list", // 列表
        "justify", // 对齐方式
        "image", // 插入图片
        "undo", // 撤销
      ];
      this.editor.config.placeholder = "请输入职位详情";
      //   /关闭粘贴样式的过滤
      this.editor.config.pasteFilterStyle = false;
      //忽略粘贴内容中的图片
      this.editor.config.pasteIgnoreImg = true;
      // 使用 base64 保存图片
      this.editor.config.uploadImgShowBase64 = true;
      // 隐藏“网络图片”tab
      this.editor.config.showLinkImg = false;
      //改变z-index
      this.editor.config.zIndex = 10;
      // 最大300M
      this.editor.config.uploadImgMaxSize = 300 * 1024 * 1024;
      this.editor.config.uploadImgServer =
        "http://wx-001.unionnetwork.com/zk/sys/oss/upload";
      this.editor.config.customUploadImg = (files, insert) => {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        // console.log(files);
        let _this = this;
        let file = files[0];
        _this.$publicObj.getLoading("上传中...");
        // 上传代码返回结果之后，将图片插入到编辑器中
        _this.$publicObj.uploadFile(
          file,
          function (imgData) {
            insert(imgData);
            _this.$toast("上传成功");
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      };
      this.editor.create();
    },
    //发布招聘
    async clickPush() {
      let {
        title,
        describes,
        editorContent:content, //视频图片
        cover,
        isSpread,
        spreadPrice,
        spreadNum,
        attention,
      } = this;
      if (title.trim() == "") return this.$toast("请输入招聘标题!");
      if (describes.trim() == "") return this.$toast("请输入招聘描述!");
      if (cover.trim() == "") return this.$toast("请上传招聘封面!");
      // 选择了推广，进行验证
      if (isSpread == 2) {
        if (spreadPrice.trim() == "") return this.$toast("推广单价不能为空!");
        if (Number(spreadPrice) <= 0.1) {
          return this.$toast("推广单价不能少于0.1元!");
        }
        if (spreadNum.trim() == "") return this.$toast("推广次数不能为空!");
        var rep = /[\.]/;
        if (Number(spreadNum) == 0 || rep.test(Number(spreadNum))) {
          return this.$toast("推广次数不正确!");
        }
      }
      let obj = {
        title, //标题
        describes, //描述
        content, //视频
        cover, //封面
        isSpread, //是否推广
        spreadPrice, //单价
        spreadNum, //次数
        spreadTotalPrice:spreadNum*spreadPrice,//推广总数
        attention, //是否关注
        agentId: sessionStorage.getItem("agentId"), //公司id
        type: 8,
      };
      let res = await this.$api.addRecruit(obj);
      if (res.code !== 0) return this.$toast(res.msg);
      this.$toast("创建成功！");
      setTimeout((_) => {
        this.$router.back();
      }, 800);
    },
    //图片上传
    clickUp() {
     this.$refs.coverfile.click();
    },
    //   上传文件
    onUpload() {
      this.$publicObj.getLoading("上传中...");
      let _this = this;
      let file=this.$refs.coverfile.files[0];  
      _this.nowFile = file;
      // 上传
      _this.$publicObj.uploadFile(
        file,
        function (imgData) {
          _this.cover = imgData;
          _this.$toast("上传成功");
          _this.$publicObj.closeLoading();
        },
        "/sys/oss/upload"
      );
    },
  },
};
</script>
<style scoped lang='less'>
#editors {
    margin-top: 18px;
  }
/* @import url(); 引入css类 */
/deep/ .van-dialog__header {
  text-align: right;
  padding: 15px 15px 0 0;
}
.van-dialog {
  width: 272px;
}
.van-cell__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .van-field {
    width: 80px;
    margin-right: 5px;
  }
}
.cont {
  font-size: 14px;
  font-weight: 700;
  color: #353535;
  text-align: center;
  p {
    padding: 20px 0;
  }
  .van-divider {
    margin: 0;
  }
  .foot {
    width: 100%;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #009dff;
  }
}
main {
  height: calc(100vh - 101px);
  padding: 46px 15px 0;
  overflow-y: scroll;
  input {
    margin-top: 7px;
    height: 40px;
    width: 100%;
    opacity: 1;
    background: #f3f5f7;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    padding-left: 12px;
    box-sizing: border-box;
    &::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #bebebe;
    }
  }

  .textarea {
    margin-top: 10px;
    background-color: #f3f5f7;
    padding: 12px !important;
    border-radius: 5px;
  }
  .box {
    display: flex;
    .upload {
      width: 99px;
      height: 99px;
      img {
        width: 100%;
        height: 100%;
        margin-bottom: 14px;
      }
    }
  }
  .up {
    margin-top: 10px;
    .uploading {
      width: 80px;
      height: 80px;
      position: relative;
      background-color: #fff;
    }
    //封面
    .u_img {
      width: 80px;
      height: 80px;
      box-sizing: border-box;
      margin-top: 4.000008px;
      box-shadow: 3.5px dashed rgba(153, 153, 153);
      .van_img {
        width: 80px;
        height: 80px;
        border: 0;
      }
      .poster_tips {
        width: 80px;
        height: 80px;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /deep/ .van-uploader {
        .van-uploader__preview-delete {
          width: 11.71875px;
          height: 11.71875px;
          i {
            font-size: 11.71875px;
            top: -0.585938px;
            left: -0.585938px;
          }
        }
      }
    }

    .img_Show {
      position: relative;

      .close {
        position: absolute;
        width: 12px;
        height: 12px;
        left: 68px;
        color: #fff;
        background-color: #000;
        border-bottom-left-radius: 10px;
        font-size: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .imgShow {
        display: flex;
        align-items: center;
        width: 80px;
        height: 80px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  p {
    margin: 5px;
    font-size: 10px;
    text-align: left;
    color: #999999;
    letter-spacing: 1px;
  }
  h3 {
    margin: 15px 0;
    font-size: 14px;
    color: #333333;
    &:last-of-type {
      font-weight: 700;
      margin: 25px 0;
    }
  }
  .van-cell {
    padding: 10px 0;
  }
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f9fafb;
  .price {
    height: 100%;
    flex: 3;
    font-size: 11px;
    color: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      font-size: 12px;
      color: #f9572c;
      span {
        font-size: 16px;
      }
    }
  }
  .push {
    height: 100%;
    flex: 2;
    background-color: #477fe6;
    font-size: 17px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>